<template>
  <div class="search">
    <div class="head">
      <div>
        <img
          src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/search2-2fb94833aa.png"
          alt
        />
        <input
          type="text"
          confirm-type="search"
          focus="true"
          v-model="words"
          @focus="inputFocus"
          @input="tipSearch"
          @confirm="searchWords"
          placeholder="商品搜索"
        />
        <img
          @click="clearInput"
          class="del"
          src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/clearIpt-f71b83e3c2.png"
          alt
        />
      </div>
      <div @click="cancel">取消</div>
    </div>
    <div class="searchtips" v-if="words">
      <div v-if="tipsData.length!==0">
        <div
          v-for="(item, index) in tipsData"
          :key="index"
          @click="searchWords"
          :data-value="item.name"
        >{{item.name}}</div>
      </div>
      <div class="nogoods" v-else>数据库暂无此类商品......</div>
    </div>
    <div class="history" v-if="historyData.length!==0">
      <div class="t">
        <div>历史记录</div>
        <div @click="clearHistory"></div>
      </div>
      <div class="cont">
        <div
          v-for="(item, index) in historyData"
          :key="index"
          @click="searchWords"
          :data-value="item.keyword"
        >{{item.keyword}}</div>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="history hotsearch">
      <div class="t">
        <div>热门搜索</div>
      </div>
      <div class="cont">
        <div
          @click="searchWords"
          :data-value="item.keyword"
          :class="{active:item.is_hot==1}"
          v-for="(item, index) in hotData"
          :key="index"
        >{{item.keyword}}</div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="goodsList" v-if="listdata.length!==0">
      <div class="sortnav">
        <div @click="changeTab(0)" :class="[0==nowIndex?'active':'']">综合</div>
        <div class="price" @click="changeTab(1)" :class="[1==nowIndex?'active':'']">价格</div>
        <div @click="changeTab(2)" :class="[2==nowIndex?'active':'']">分类</div>
      </div>
      <div class="sortlist">
        <div class="item" v-for="(item, index) in listdata" :key="index" @click="goodsDetail(item.id)">
          <img :src="item.list_pic_url" alt />
          <p class="name">{{item.name}}</p>
          <p class="price">￥{{item.retail_price}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "../../utils/index";
export default {
  data() {
    return {
      words: "",
      //.如果用微信开发者工具的话，这个openid会自动提供的,因为在mounted中调用了getHistoryData方法，我们本身在这个方法上是没有进行问号传参的，但是却已经在微信开发者工具中拿到了数据
      openid: "",
      hotData: [],
      historyData: [],
      tipsData: [],
      order: "",
      listdata: [],
      nowIndex: 0
    };
  },
  mounted() {
    //`小程序提供的方法
    this.openid = wx.getStorageSync("openId") || "";
    this.getHistoryData();
  },
  methods: {
    clearInput() {
      this.words = "";
      //-上面有i-if判断 如果数组为长度0那么就不会展示了
      this.listdata = [];
    },
    cancel() {
      //`点击取消返回上个页面就行
      wx.navigateBack({
        delta: 1
      });
    },
    async clearHistory() {
      //-这个data是后端ctx返回的data
      const data = await post("/search/clearhistoryaction", {
        openId: this.openid
      });
      //删除成功
      if (data) {
        this.historyData = [];
      }
    },
    inputFocus() {
      //`再次聚焦的时候，商品列表应该消失
      this.listdata = [];
      //`展示搜索提示信息
      this.tipSearch()
    },
    async tipSearch() {
      //~ 即使是get方法，也可以不用问号传参的形式，后面直接给一个对象，这个是koa-router提供的
      const data = await get("/search/helperaction", {
        keyword: this.words
      });
      // console.log(data);
      this.tipsData = data.keywords;
    },
    async searchWords(e) {
      //-这个e是小程序提供的，可以获取到输入框中输入的内容以及其他的一些东西
      // console.log(e);
      let value = e.currentTarget.dataset.value || e.target.value;
      this.words = value || this.words;
      const data = await post("/search/addhistoryaction", {
        openId: this.openid,
        keyword: value || this.words
      });
      // console.log(data);
      //获取历史记录和热门搜索的数据
      this.getHistoryData();
      this.getListData();
    },
    async getHistoryData(first) {
      const data = await get("/search/indexaction?openId=" + this.openid);
      this.historyData = data.historyData;
      this.hotData = data.hotKeywordList;
      // console.log(data);
    },
    //获取商品列表
    async getListData() {
      const data = await get("/search/helperaction", {
        keyword: this.words,
        order: this.order
      });
      this.listdata = data.keywords;
      //
      this.tipsData = [];
      // console.log(data);
    },
    changeTab(index) {
      this.nowIndex = index;
      if (index == 1) {
        this.order = this.order == "asc" ? "desc" : "asc";
      } else {
        this.order = "";
      }
      this.getListData();
    },
    goodsDetail(id){
      wx.navigateTo({
        url: '/pages/goods/main?id='+id,
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>